<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品列表</title>
    <link rel="stylesheet" href="../css/list.css">
    <link rel="stylesheet" href="../css/react.css">
</head>
<body>
     <!-- 头部 -->
     <div id="continer" class="bignav">
        <div class="continer nav">
          <div class="nav_left">
            <div class="index">
              <a href="./index.html">
                <img src="../images/in_03.jpg" alt="首页" />
                <span>京东首页</span>
                </a>
            </div>
            <div class="map">
              <i class="iconfont icon-dingwei"></i>
              <span>深圳</span>
            </div>
          </div>
          <div class="nav_right">
            <div class="login">
              <span class="hello">你好，请登录</span><a href="#">免费注册</a>
            </div>
            <ul>
              <li><a href="#">我的订单</a></li>
              <li>
                <a href="#">我的京东</a><img src="../images/xia_09.jpg" alt="" />
              </li>
              <li><a href="#">京东会员</a></li>
              <li>
                <a href="#">企业采购</a><img src="../images/xia_09.jpg" alt="" />
              </li>
              <li>
                <a href="#">客户服务</a><img src="../images/xia_09.jpg" alt="" />
              </li>
              <li>
                <a href="#">网站导航</a><img src="../images/xia_09.jpg" alt="" />
              </li>
              <li><a href="#">手机京东</a></li>
            </ul>
          </div>
        </div>
      </div>
      <!-- 搜索 -->
      <div id="continer">
        <div class="continer shoping">
          <h1><img src="../images/re_03.jpg" alt="logo" /></h1>
          <div class="inp">
            <input type="text" value="百搭鞋" />
            <button class="btn1">搜本站</button>
            <button class="btn2">搜本店</button>
          </div>
          <a href="./shops.html" class="shop">
            <i class="iconfont icon-gouwuche"></i>
            <span class="shops">0</span>
            我的购物车
          </a>
        </div>
      </div>
      <!-- 商品推荐 -->
    <div id="continer" class="biggood">
        <h2>商品列表</h2>
  
        <div class="continer shopList">
          
        </div>
        <div class="bbox"></div>
      </div>
      <!-- 底部 -->
      <div id="continer" class="Footer">
        <div class="foot_top">
          <ul>
            <li>品类齐全,轻松购物</li>
            <li>多仓直发,极速配送</li>
            <li>正品行货,精致服务</li>
            <li>天天低价,畅选无忧</li>
          </ul>
        </div>
        <div class="footer continer">
          <ul class="all_left">
            <li>
              <h5>购物指南</h5>
              <a href="#">购物流程</a>
              <a href="#">会员介绍</a>
              <a href="#">生活旅行</a>
              <a href="#">常见问题</a>
              <a href="#">大家电</a>
              <a href="#">联系客服</a>
            </li>
            <li>
              <h5>配送方式</h5>
              <a href="#">上门自提</a>
              <a href="#">211限时达</a>
              <a href="#">配送服务查询</a>
              <a href="#">配送费收取标准</a>
              <a href="#">海外配送</a>
  
            </li>
            <li>
              <h5>支付方式</h5>
              <a href="#">货到付款</a>
              <a href="#">在线支付</a>
              <a href="#">分期付款</a>
              <a href="#">公司转账</a>
  
            </li>
            <li>
              <h5>售后服务</h5>
              <a href="#">售后政策</a>
              <a href="#">价格保护</a>
              <a href="#">退款说明</a>
              <a href="#">返修/退换货</a>
              <a href="#">取消订单</a>
            </li>
            <li>
              <h5>特色服务</h5>
              <a href="#">夺宝岛</a>
              <a href="#">DIY装机</a>
              <a href="#">延保服务</a>
              <a href="#">京东E卡</a>
              <a href="#">京东通信</a>
              <a href="#">京鱼座智能</a>
            </li>
          </ul>
          <ul class="all_right">
            <h4>京东自营覆盖区县</h4>
            <p>京东已向全国2661个县区提供自营配送服务，支持货到付款，POS机刷卡和售后上门服务</p>
          <a href="#">查看详情></a>
  
          </ul>
        </div>
      </div>
</body>
<script src="../js/jquery-3.4.1.min.js"></script>
<script src="../js/Ajax.js"></script>
<script src="../js/paging.js"></script>
<script src="../js/cookie.js"></script>
<script>
     var uname=getCookie("username");
    if(uname){
      var  data=localStorage.getItem(uname);
          data=JSON.parse(data);          
          if(data){
            $(".shops").text(data.length);
          }else{
            $(".shops").text("0");
          }
      $(".hello").text("欢迎 "+uname);
      $(".hello").css({
        "color":"green",
        "fontSize":"16px",
        "fontWeight":"bold"
      })
    }else{
      $(".hello").text("你好，请登录");

    }
    $(".hello").click(function(){
      if($(".hello").text()=="你好，请登录"){
        location.href="./login.html";
      }
    })

    setAjax({
      url:"../server/list.php",
      dataType:"json",
      success:function(res){
        var fyc=new Page({
          language: {
        first: "第一页",
        previous: "上一页",
        next: "下一页",
        last: "最后一页",
    },
    pageData: {
        total: res.length,
        pageSize: 15
    }
        },function(currentPage){
          var str='';
          var arr=res.slice((currentPage-1)*15,currentPage*15);
          
          for(var i=0;i<arr.length;i++){
            str +=`<a href="./page.html?id=${arr[i].id}" id="goods">
          <img src="${arr[i].img}" alt="">
          <p>${arr[i].name}</p>
          <span>￥<i>${arr[i].many}</i></span>
        </a>`
          }         
          document.querySelector(".shopList").innerHTML=str;
        }
        )}
    
    })

</script>
</html>